<template>
    <div class='user'>  
        <div class="top">
            <img :src="result.avatar" alt="" v-if="result"> <br>
            <div class="miss">
                <div>用户:  {{result.userName}}</div>
                <div> 昵称: {{result.nickName}}</div>
            </div>
            <van-icon class="address-icon" name="location-o" size="30" @click="setaddress"/>
        </div>

        <div class="icon">
            <ul>
                <li><van-icon name="chat-o" color="#1989fa" size="32"  /><div>信息</div></li>
                <li><van-icon name="like-o" color="#ee0a24" size="32"  /><div>喜欢</div></li>
                <li><van-icon name="star-o" color="#1989fa" size="32"  /><div>星星</div></li>
                <li><van-icon name="phone-o" color="#1989fa" size="32"  /><div>联系</div></li>
            </ul>
            <ul>
                <li><van-icon name="setting-o" color="#ee0a24" size="32"  /><div>设置</div></li>
                <li><van-icon name="fire-o" color="#1989fa" size="32"  /><div>热爱</div></li>
                <li><van-icon name="bag-o" color="#1989fa" size="32"  /><div>包包</div></li>
                <li><van-icon name="gem-o" color="#1989fa" size="32"  /><div>珍宝</div></li>
            </ul>
        </div>
        <div class ="order">
            <h4>我的订单</h4>
            <ul>
                <li><van-icon name="smile" color="#1989fa" size="32"  /><div>待付款</div></li>
                <li><van-icon name="thumb-circle" color="#1989fa" size="32"  /><div>待发货</div></li>
                <li><van-icon name="shop-collect" color="#1989fa" size="32"  /><div>已发货</div></li>
                <li><van-icon name="volume" color="#1989fa" size="32"  /><div>待评价</div></li>
            </ul>
        </div>
        <van-button square type="primary" @click = "exit">退出登录</van-button>
    </div>
</template>

<script>
import { removeToken} from "../../utils/auth"
import { Toast } from "vant";
export default {
    
    components: {},
    data() {
        
        return {
            result: "",
            flag: true,
        };
    },
    computed: {},
    watch: {},
    
    methods: {
        setaddress(){
            this.$router.push("/order")
        },
        //退出登录
        exit() {
            removeToken("token");
            // localStorage.removeItem("reg");
            this.$router.push("/home");
        }
    },
    created() {
    
        //从本地 把 用户名和密码 取出来 
        let result = localStorage.getItem( "reg");
        if(result !== null) {
            let result1 = JSON.parse(result);
            this.result = result1;
        }else {
           Toast.fail('请先注册');
           this.$router.push("/register"); 
        }

    },
    mounted() {
        
    },
}
</script>
<style scoped>
    .user{
        position: relative;
    }
    button {
        margin-left: 115px;
        margin-top: 30px;
        width: 138px;
        background: rgb(102, 122, 97);
        letter-spacing: 4px;
    }
    .top {
        display: flex;
        
    }
    .address-icon{
        position: absolute;
        right: 20px;
        top: 35px;
    }
   img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-top: 20px;
        margin-left: 10px;
        border: 1px solid rgb(68, 60, 60)
   }
   .miss{
       margin-top: 26px;
       margin-left: 50px;
       color:rgb(133, 39, 133);
   }
   .miss div {
       margin-top: 16px;
   }
    .icon ul{
        width: 332px;
        padding-top: 20px;
        margin:0 auto;
        display: flex;
        justify-content: space-between
   }
   .order {
        background: rgb(240, 238, 238);
        border-radius: 20px;
        padding: 2px;
        width: 346px;
        margin: 0 auto;
        margin-top: 16px;
        padding-bottom: 18px;
   }
   h4 {
       margin-left: 10px;
   }
   .order ul {
        padding-top: 4px;

        margin:0 auto;
        display: flex;
        justify-content: space-around;
   }
   .order ul li div{
       margin-top: 4px;
   }
   .order ul li .van-icon {
       margin-left: 8px;
   }
</style>